//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/match/loginbg.png') no-repeat;
  //background:url('../images/match/loginbg.png') no-repeat center / 100% 100%;
  background-size:100%;

  //background-size:(1080/54)*1rem 43.555556rem;
}
.person_info{
  width: 100%;
  position: relative;
 .head{
   width: (184/54)*1rem;
   height: (184/54)*1rem;
   position: absolute;
   top: (68/54)*1rem;
   background-color: skyblue;
   border-radius: 50%;
   left: 50%;
   transform: translateX(-50%);
   border: (10/54)*1rem solid white;
 }
  .code{
    width: (97/54)*1rem;
    height: (95/54)*1rem;
    position: absolute;
    top: (120/54)*1rem;
    left: (661/54)*1rem;
    background:url('../images/person_info/组14.png') no-repeat center / 100% 100%;
  }
  .name{
    font-size: (36/54)*1rem;
    position: absolute;
    top: ((68+184+13)/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
  }
  .level{
    font-size: (34/54)*1rem;
    position: absolute;
    top: (315/54)*1rem;
    left: (305/54)*1rem;
    color: white;
  }
  .progress{
    width: (289/54)*1rem;
    height: (26/54)*1rem;
    position: absolute;
    top: (323/54)*1rem;
    left: (425/54)*1rem;
    border:(4/54)*1rem solid #DCDCDC;
    background-color: #3ac48e;
    border-radius: (289/54)*1rem;
  }
  .bg{
    width: (971/54)*1rem;
    height: (1102/54)*1rem;
    position: absolute;
    top: ((323+49)/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff0c4;
    border-radius: (45/54)*1rem;
    .dartboard{
      width: (636/54)*1rem;
      height: (636/54)*1rem;
      position: absolute;
      top: (81/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
      background:url('../images/person_info/组13.png') no-repeat center / 100% 100%;
      canvas{
        //border: 1px solid blue;
      }
    }
    .zi{
      font-size: (38/54)*1rem;
      position: absolute;
      color: #514666;
    }
    .literature{
      top: (37/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
    }
    .arts{
      top: (222/54)*1rem;
      left: (119/54)*1rem;
    }
    .popular{
      top: (222/54)*1rem;
      right: (119/54)*1rem;
    }
    .science{
      top: ((222+322)/54)*1rem;
      left: (119/54)*1rem;
    }
    .entertainment{
      top: ((222+322)/54)*1rem;
      right: (119/54)*1rem;
    }
    .life{
      top: ((37+685)/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .detailed{
    width: (787/54)*1rem;
    height: (243/54)*1rem;
    position: absolute;
    top: ((37+685+96+323+49)/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    .zi{
      color: #514666;
      font-size:(33/54)*1rem;
      position: absolute;
      left: (31/54)*1rem;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 800;
    }
    .lf{
      height: (63/54)*1rem;
      width: (374/54)*1rem;
      border-radius: (374/54)*1rem;
      background-color: #ffc000;
      margin-bottom: (29/54)*1rem;
      position: absolute;
      left: 0;
    }
    .rh{
      height: (63/54)*1rem;
      width: (374/54)*1rem;
      border-radius: (374/54)*1rem;
      background-color: #ffc000;
      margin-bottom: (29/54)*1rem;
      position: absolute;
      right: 0;
    }
    .winnig_rate{
      top: ((29+63)/54)*1rem;
    }
    .experience{
      top: ((29+63+29+63)/54)*1rem;
    }
    .total{
      top: ((29+63)/54)*1rem;
    }
    .wins{
      top: ((29+63+29+63)/54)*1rem;
    }
  }
  .share{
    top:((46+323+49+1102)/54)*1rem;
    height: (150/54)*1rem;
    width: (624/54)*1rem;
    background-color: #b0d52d;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: (27/54)*1rem;
    .ico{
      width: (74/54)*1rem;
      height: (72/54)*1rem;
      position: absolute;
      top: (7/54)*1rem;
      left: 50%;
      transform: translateX(-50%);
      background:url('../images/person_info/组50.png') no-repeat center / 100% 100%;
    }
    .zi{
      color: #4e8015;
      width: 100%;
      font-size:(33/54)*1rem;
      position: absolute;
      top: (92/54)*1rem;
      text-align: center;
      font-weight: 800;
    }
  }
  .tip{
    width: 100%;
    font-size: (28/54)*1rem;
    color: white;
    text-align: center;
    position: absolute;
    top:((46+323+49+1102+161)/54)*1rem;
    span{
      display: inline-block;
      background:url('../images/result/money.png') no-repeat center / 100% 100%;
      width: (68/54)*1rem;
      height: (41/54)*1rem;
      position: relative;
      top:0.144444rem;
    }
  }
}